<template>
  <px-dialog v-model="visible" class="equip-dialog-wrap" title="选择点位" width="1200px" @open="openDialog" @close="closeDialog">
    <div class="equip-dialog-content">
      <px-form ref="formRef" class="custom-form-ui equip-form" :model="queryParams" label-position="right" label-width="120px">
        <px-row :gutter="16" style="width: 100%">
          <px-col :span="6">
            <px-form-item label="点位名称">
              <px-input v-model="queryParams.point" placeholder="请输入点位名称进行搜索" autocomplete="off" clearable @keyup.enter="queryTable">
                <template #suffix>
                  <px-icon style="cursor: pointer" @click="queryTable">
                    <search />
                  </px-icon>
                </template>
              </px-input>
            </px-form-item>
          </px-col>
          <px-col :span="6">
            <px-form-item label="设备">
              <px-input v-model="queryParams.twinId" placeholder="请输入设备编号" autocomplete="off" clearable @keyup.enter="queryTable">
                <template #suffix>
                  <px-icon style="cursor: pointer" @click="queryTable">
                    <search />
                  </px-icon>
                </template>
              </px-input>
            </px-form-item>
          </px-col>
          <px-col :span="6">
            <EquipSystemTree
              :facCode="queryParams.facCode"
              :className="queryParams.className"
              :systemCode="queryParams.systemId"
              @changeAllSystemCodes="changeAllSystemCodes"
              @changeSystemCodes="changeSystemCodes"
              @clearSystem="clearSystem"
            />
          </px-col>
          <px-col :span="6">
            <px-form-item label="报警级别">
              <px-select v-model="queryParams.alarmLevel" placeholder="请选择报警级别" clearable filterable>
                <px-option v-for="item in filterLevelList" :key="item.id" :label="item.name" :value="item.value" />
              </px-select>
            </px-form-item>
          </px-col>
          <px-col :span="6" style="margin-top: 8px">
            <px-form-item label="报警类型">
              <px-select v-model="queryParams.alarmType" placeholder="请选择报警类型" clearable filterable>
                <px-option v-for="item in alarmTypeList" :key="item.id" :label="item.name" :value="item.value" />
              </px-select>
            </px-form-item>
          </px-col>
          <px-col :span="6" style="margin-top: 8px">
            <px-button type="primary" @click="queryTable">查询</px-button>
            <px-button @click="resetTable">重置</px-button>
          </px-col>
        </px-row>
      </px-form>
      <px-table :data="tableData" class="equip-table" max-height="400" border @selection-change="selectChange">
        <px-table-column type="selection" width="50" align="center" />
        <px-table-column prop="point" label="报警点位" min-width="150" show-overflow-tooltip />
        <px-table-column prop="alarmLevel" label="报警级别" min-width="100" show-overflow-tooltip>
          <template #default="scope">
            <px-tag v-if="scope.row.alarmLevel" style="color: #fff" round :color="tagBgColorList[scope.row.alarmLevel]">
              {{ scope.row.alarmLevel }}
            </px-tag>
            <span v-else />
          </template>
        </px-table-column>
        <px-table-column prop="alarmType" label="报警类型" min-width="100" show-overflow-tooltip />
        <px-table-column prop="alarmDesc" label="报警描述" min-width="100" show-overflow-tooltip />
        <px-table-column prop="classNameDesc" label="科室" min-width="80" show-overflow-tooltip />
        <px-table-column prop="systemName" label="系统" min-width="100" show-overflow-tooltip />
        <px-table-column prop="twinId" label="设备ID" min-width="150" show-overflow-tooltip />
        <px-table-column prop="twinName" label="所属设备" min-width="150" show-overflow-tooltip />
        <px-table-column prop="twinPosition" label="位置" min-width="150" show-overflow-tooltip />
      </px-table>
      <pagination
        v-show="total > 0"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        class="equip-pagination"
        :total="total"
        @pagination="queryTable"
      />
      <div style="margin-top: 16px; text-align: right">
        <px-button @click="closeDialog">取消</px-button>
        <px-button type="primary" @click="handleSubmit">确认</px-button>
      </div>
    </div>
  </px-dialog>
</template>
<script setup lang="ts">
import { getPointList } from "@/api/alert";
import { queryDictData } from "@/api/common";
import EquipSystemTree from "@/views/all/equip/components/EquipSystemTree.vue";
import { computed, reactive, toRefs } from "vue";

const tagBgColorList = {
  一级报警: "#E02B2B",
  二级报警: "#FF771E",
  三级报警: "#F1B11A",
  四级报警: "#4A9BFF"
};

// 调用父级-关闭弹窗方法
const emits = defineEmits(["closeDialog"]);
// 父级传过来的值
const props = defineProps(["visible", "className"]);
const visible = computed(() => props.visible);
// 页面本身的值
const state = reactive<any>({
  queryParams: {
    pageNum: 1,
    pageSize: 20
  },
  tableData: [],
  total: 0,
  selectedData: [],
  filterLevelList: [],
  alarmTypeList: [],
  systemIdList: []
});
const { queryParams, tableData, total, selectedData, filterLevelList, alarmTypeList, systemIdList } = toRefs(state);
// 查询工具列表
const queryTable = async () => {
  const params = queryParams.value;
  const data = await getPointList({ ...params, systemIdList: systemIdList.value });
  tableData.value = data?.data || [];
  total.value = data?.total;
};
// 重置筛选条件和工具列表
const resetTable = async () => {
  queryParams.value = {
    className: props.className,
    pageNum: queryParams.value.pageNum,
    pageSize: queryParams.value.pageSize
  };
  queryTable();
};

// 表格多选框选中
const selectChange = val => {
  selectedData.value = val;
};

// 确定选择备件
const handleSubmit = () => {
  emits("closeDialog", selectedData.value);
};

// 打开弹窗
const openDialog = async () => {
  filterLevelList.value = await queryDictData({ typeCode: "ALARM_LEVEL" });
  alarmTypeList.value = await queryDictData({ typeCode: `${props.className}_ALARM_TYPE` });
  queryParams.value = {
    className: props.className,
    pageNum: 1,
    pageSize: 20
  };
  queryTable();
};
// 关闭弹窗
const closeDialog = () => {
  emits("closeDialog");
};

// 系统组件调用父组件
const changeSystemCodes = (val, val2) => {
  queryParams.value.systemId = val;
  systemIdList.value = val2;
};
// 系统组件调用父组件
const changeAllSystemCodes = (val, val2, val3, val4) => {
  queryParams.value.facCode = val;
  queryParams.value.className = val2;
  queryParams.value.systemId = val3;
  systemIdList.value = val4;
};
// 系统组件值改变触发
const clearSystem = val => {
  queryParams.value.systemId = "";
  systemIdList.value = [];
};
</script>

<style lang="scss" scoped>
@import url("@/views/all/equip/scss/add-dialog.scss");
.equip-dialog-wrap .equip-dialog-content .equip-form .px-form-item {
  width: 100%;
}
</style>
